<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音响</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/product-list.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background-color: #333;
            color: white;
        }

        header h1 {
            margin: 0;
        }

        header a {
            color: white;
            text-decoration: none;
            padding: 10px 15px;
            border-radius: 5px;
        }

        header a:hover {
            background-color: #555;
        }

        .product-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            list-style-type: none;
            padding: 0;
        }

        .product-list li {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            margin: 10px;
            padding: 15px;
            width: 220px; /* Adjusted width for better layout */
            text-align: center;
            transition: box-shadow 0.3s ease, transform 0.3s ease; /* Added transform for hover effect */
        }

        .product-list li:hover {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            transform: translateY(-5px); /* Slight lift effect on hover */
        }

        img {
            max-width: 100%;
            max-height: 150px; /* Set maximum height for consistency */
            object-fit: contain; /* Maintain aspect ratio */
            border-radius: 5px;
        }

        .add-to-cart {
            background-color: #28a745; /* Green color */
            color: white;
            border: none;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
            margin-top: auto; /* Push button to bottom */
        }

        .add-to-cart:hover {
            background-color: #218838; /* Darker green on hover */
        }

        .product-description {
            margin-top: 10px; /* Space between button and description */
            font-size: 14px; /* Font size for description */
            color: #666; /* Grey color for description */
        }

        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border-radius: 8px; /* Rounded corners for modal */
            width: 80%;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <header>
        <h1>音响</h1>
        <nav>
            <a href="index.html">首页</a>
            <a href="cart.html">我的购物车</a>
            <a href="user-center.html">用户中心</a>
        </nav>
    </header>

    <ul class="product-list">
        <li>
            <img src="./images/音响 耳机/B&O Explore.jpg" alt="B&O Explore">
            <h3>B&O Explore</h3>
            <p>价格：¥2,999</p>
            <p>详细信息：高端蓝牙音箱，卓越音质，便携设计。</p>
            <button class="add-to-cart" onclick="addToCart('B&O Explore', 2999)">加入购物车</button>
        </li>
        <li>
            <img src="./images/音响 耳机/Bose SoundLink Revolve+.jpg" alt="Bose SoundLink Revolve+">
            <h3>Bose SoundLink Revolve+</h3>
            <p>价格：¥1,899</p>
            <p>详细信息：360度环绕音效，IPX4防水，持久续航。</p>
            <button class="add-to-cart" onclick="addToCart('Bose SoundLink Revolve+', 1899)">加入购物车</button>
        </li>
        <li>
            <img src="./images/音响 耳机/JBL Flip 5 便携蓝牙音箱.jpg" alt="JBL Flip 5">
            <h3>JBL Flip 5</h3>
            <p>价格：¥999</p>
            <p>详细信息：轻巧便携，IPX7防水，JBL纯正音效。</p>
            <button class="add-to-cart" onclick="addToCart('JBL Flip 5', 999)">加入购物车</button>
        </li>
        <li>
            <img src="./images/音响 耳机/声擎A2+ Wireless.jpg" alt="声擎A2+ Wireless">
            <h3>声擎A2+ Wireless</h3>
            <p>价格：¥1,699</p>
            <p>详细信息：强劲低音，支持Wi-Fi和蓝牙，多种连接方式。</p>
            <button class="add-to-cart" onclick="addToCart('声擎A2+ Wireless', 1699)">加入购物车</button>
        </li>
        <li>
            <img src="./images/音响 耳机/小度智能音箱mate pro.jpg" alt="小度智能音箱mate pro">
            <h3>小度智能音箱mate pro</h3>
            <p>价格：¥499</p>
            <p>详细信息：智能语音助手，多功能智能家居控制。</p>
            <button class="add-to-cart" onclick="addToCart('小度智能音箱mate pro', 499)">加入购物车</button>
        </li>
        <li>
            <img src="./images/音响 耳机/xiaomi Sound.jpg" alt="xiaomi Sound">
            <h3>Xiaomi Sound</h3>
            <p>价格：¥599</p>
            <p>详细信息：高质量音频，智能语音助手，家居互联。</p>
            <button class="add-to-cart" onclick="addToCart('Xiaomi Sound', 599)">加入购物车</button>
        </li>
        <li>
            <img src="./images/音响 耳机/索尼 SRS-XB23.jpg" alt="索尼 SRS-XB23">
            <h3>索尼 SRS-XB23</h3>
            <p>价格：¥1,299</p>
            <p>详细信息：Extra Bass音效，IP67防水防尘，多色灯光秀。</p>
            <button class="add-to-cart" onclick="addToCart('索尼 SRS-XB23', 1299)">加入购物车</button>
        </li>
    </ul>
    <script>
        function addToCart(productName, price) {
            let cart = JSON.parse(localStorage.getItem('cart')) || [];
            
            // 检查产品是否已在购物车中
            const existingProduct = cart.find(item => item.productName === productName);
            
            if (existingProduct) {
                existingProduct.quantity += 1; // 增加数量
            } else {
                cart.push({ productName, price, quantity: 1 }); // 添加新产品
            }
            
            localStorage.setItem('cart', JSON.stringify(cart)); // 更新购物车
            alert(`${productName} 已加入购物车！`);
        }
    </script>
</body>

</html>